
<!-- 解决方案 -->
<template>
  <div class="abb-page">
    <div>
      <img
        src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
      />
    </div>
    <p class="fz32 mb10">
      <span class="henxinase ab"></span><br />
      解决方案
    </p>

    <div class="banner-jjnwer">
      <img :src="bannerUrl" v-if="bannerUrl" class="w100 h100 dsfdrrewer" />
      <div
        class="kkkmnerrwe cf fz40 vertical-center sz"
        @click="photoShowModaler = true"
      >
        点击上传顶图
      </div>
    </div>
    <div class="mt20 fz22">
      <n-input
        class="fz22 br0"
        placeholder=""
        type="textarea"
        size="medium"
        v-model:value="introduce"
        clearable
        @blur="shujueer"
      ></n-input>
    </div>

    <div class="mt20 hjkhbjwertw">
      <div
        class="case-item pr"
        v-for="(item, idx) in caseList"
        :key="idx"
        @click="hf('Edutsolution', { id: item.id })"
      >
        <img :src="item.fm" class="img-box-j imgjz" />
        <p class="fz20">{{ item.title }}</p>
        <p class="fz16">
          {{ item.subheading }}
        </p>
        <div class="jjhbnjderrbg vertical-center">
          <span class="cf fz40">点击编辑</span>
        </div>
      </div>
    </div>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传/选择解决方案顶图</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="abb解决方案顶图"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { nextTick, ref } from "vue";
import { dxget, dialog, dxdel, dxpost, hf } from "../../../util";
import photoGallery from "../../../components/util/photoGallery";
const bannerUrl = ref();
const photoShowModaler = ref(false);
const introduce = ref("");
const caseList = ref();
let videUrler = "";
const shujueer = () => {
  upDataHome({ introduce: introduce.value });
};

const upDataHome = async (cs) => {
  const { errno }: any = await dxpost(
    "abb/abbhomeBj",
    {
      id: 3,
      ...cs,
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("修改成功！");
  }
};

const getImger = (data) => {
  videUrler = data;
};

const geturler = () => {
  photoShowModaler.value = false;
  bannerUrl.value = videUrler;
  upDataHome({ banner: videUrler });
};

const initData = async () => {
  const { data }: any = await dxget("abb/abbhomeBj", { id: 3 });
  bannerUrl.value = data.banner;
  introduce.value = data.introduce;
};
initData();

const getCase = async () => {
  const { data }: any = await dxget("abb/abbsolution", { page: 1 });
  caseList.value = data.data;
};
getCase();
</script>
 <style scoped>
.banner-jjnwer {
  height: 445px;
  position: relative;
  background: #f8f8f8;
}
.kkkmnerrwe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.banner-jjnwer:hover .kkkmnerrwe {
  display: flex;
}
.dsfdrrewer {
  object-fit: cover;
}
.hjkhbjwertw {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.img-box-j {
  width: 100%;
  height: 300px;
}
.jjhbnjderrbg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  cursor: pointer;
}
.case-item:hover .jjhbnjderrbg {
  display: flex;
}
</style>